import React, { useState } from 'react'
import { useNavigate, Outlet } from 'react-router-dom'
import img from '../../images/222.png'
import {
    Form,
    Input,
    Button,
    Toast,
    Tabs 
} from 'antd-mobile'
import axios from '../../api/axios'
function Index() {
    let navigate = useNavigate()
    const onFinish = async (values) => {
        const result = await axios.post('/api/login', values)
        console.log(result);
        const { code, message, data } = result.data
        if (code == 10000) {
            localStorage.setItem('token', data.accessToken)
            localStorage.setItem('userInfo', JSON.stringify(data.userInfo))
            Toast.show({
                icon: 'success',
                content: message,
            })
            navigate('/')
        }else{
            Toast.show({
                icon: 'fail',
                content: message,
              })
        }

    }
    return (
        <div>
           
             <Tabs>
          <Tabs.Tab title='APP登录' key='fruits'>
            <div style={{textAlign:'center'}}>
            <img src={img}  alt="" style={{marginTop:'40px'}}/>
            </div>
            
          </Tabs.Tab>
          <Tabs.Tab title='免密登录' key='vegetables'>
          免密登录,免密登录
          免密登录,免密登录
          </Tabs.Tab>
          <Tabs.Tab title='密码登录' key='animals'>
             <Form
                layout='horizontal'
                onFinish={onFinish}
                footer={
                    <Button block type='submit' color='primary' size='large'>
                        提交
                    </Button>
                }
            >
                <Form.Header>水平布局表单</Form.Header>
                <Form.Item
                    name='username'
                    label='姓名'
                    rules={[{ required: true, message: '姓名不能为空' }]}
                >
                    <Input placeholder='请输入姓名' />
                </Form.Item>
                <Form.Item
                    name='password'
                    label='密码'
                    rules={[{ required: true, message: '密码不能为空' }]}
                >
                    <Input placeholder='请输入密码' />
                </Form.Item>
            </Form>
          </Tabs.Tab>
        </Tabs>
        </div>
    )
}

export default Index
